<template>
    <div>
        <h1>房型显示</h1>
        房型名称：<input type="text" v-model="fx.name"><br>
        房型价格：<input type="text" v-model="money1">~<input type="text" v-model="money2"><br>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="房号添加页面" @click="add">
        <table class="table table-bordered">
            <tr>
                <td>房型名称</td>
                <td>图片</td>
                <td>房型面积</td>
                <td>是否有窗</td>
                <td>价格</td>
                <td>入住人数</td>
                <td>状态</td>
                <td>添加时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.name }}</td>
                <td>{{ item.photo }}</td>
                <td>{{ item.mianJi }}</td>
                <td>{{ item.isNo == 0 ? '无窗' : '有窗' }}</td>
                <td>￥{{ item.money.toFixed(2) }}</td>
                <td>{{ item.num }}</td>
                <td>{{ item.state == 0 ? "禁用" : "启用" }}</td>
                <td>{{ item.addTime.substr(0, 10) }}</td>
                <td>
                    <input type="button" value="修改" @click="FanTian(item.id)">
                    <input type="button" value="删除" @click="Del(item.id)">
                </td>
            </tr>
        </table>
        总共<span>{{ data.zt }}</span>条
        每页<span>{{ fx.size }}</span>条
        当前<span>{{ fx.index }}</span>/<span>{{ data.zy }}</span>页
        <input type="button" value="首页" @click="FenYe('a')">
        <input type="button" value="上一页" @click="FenYe('b')">
        <input type="button" value="下一页" @click="FenYe('c')">
        <input type="button" value="尾页" @click="FenYe('d')">
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
let router = useRouter();
let route = useRoute();

let data: any = reactive({
    fx: {
        "name": "",
        index: 1,
        size: 2,
    },
    money1: "",
    money2: "",
    zt: 0,
    zy: 0,
    list: [],
});
let { fx, money1, money2, zt, zy, list } = toRefs(data);
onMounted(() => {
    Show();
})
const Show = () => {
    let obj = {
        name: fx.value.name,
        index: fx.value.index,
        size: fx.value.size,
        money1: money1.value,
        money2: money2.value,
    }
    axios({
        url: '/api/HouseX/HXList',
        method: 'get',
        params: obj,
    }).then((res) => {
        list.value = res.data.data;
        zt.value = res.data.zt;
        zy.value = res.data.zy;
    })
}
const FenYe = (type: any) => {
    switch (type) {
        case 'a':
            if (fx.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            fx.value.index = 1;
            break;

        case 'b':
            if (fx.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            fx.value.index--;
            break;

        case 'c':
            if (fx.value.index == data.zy) {
                alert("已经是最后一页了")
                return;
            }
            fx.value.index++;
            break;

        case 'd':
            if (fx.value.index == data.zy) {
                alert("已经是最后一页了")
                return;
            }
            fx.value.index = data.zy;
            break;


    }
    Show();
}

const Del = (id: any) => {
    let res = confirm("确定删除吗？")
    if (res) {
        let obj = {
            id: id,
        };
        axios({
            url: '/api/HouseX/Del',
            method: 'delete',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert("删除成功")
                Show();
            } else {
                alert("删除失败")
                return;
            }
        })
    }
}

const FanTian = (id: any) => {
    router.push({
        path: '/upd',
        query: {
            id: id
        }
    })
}

const add = () => {
    router.push({
        path: '/addn',
        
    })
}

</script>

<style scoped></style>